<template>
  <div class="app-container">
    <el-form
      v-show="showSearch"
      :model="queryParams"
      size="small"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="createTime"
          style="width: 240px"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
        >搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
         <el-button
          type="primary"
          @click="handlePrint"
        >打印</el-button>
        <el-button
          type="primary"
          @click="handleExportExcel"
        >导出EXCEL</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar
        :show-search.sync="showSearch"
        @queryTable="getList"
      />
    </el-row>

    <el-table
      v-loading="loading"
      :data="productList"
      :stripe="true"
      :show-overflow-tooltip="true"
      border
      :summary-method="getSummaries"
      show-summary
    >
      <el-table-column 
        label="序号" 
        align="center" 
        prop="id"
        :filters="[]"
        :filter-method="filterHandler"
      />
      <el-table-column 
        label="产品名称" 
        align="center" 
        prop="name"
        :filters="getUniqueValues('name')"
        :filter-method="filterHandler"
      />
      <el-table-column 
        label="图号" 
        align="center" 
        prop="tuhao"
        :filters="getUniqueValues('tuhao')"
        :filter-method="filterHandler"
      />
      <el-table-column
        label="规格型号"
        align="center"
        prop="guige"
        :filters="getUniqueValues('guige')"
        :filter-method="filterHandler"
      />
      <el-table-column
        label="客户名称"
        align="center"
        prop="kehu"
        :filters="getUniqueValues('kehu')"
        :filter-method="filterHandler"
      />
      <el-table-column
        label="合同类型"
        align="center"
        prop="hetong_leixing"
        :filters="getUniqueValues('hetong_leixing')"
        :filter-method="filterHandler"
      />
      <el-table-column
        label="合同订单编号"
        align="center"
        prop="dingdan"
        :filters="getUniqueValues('dingdan')"
        :filter-method="filterHandler"
      />
      <el-table-column
        label="订单数量"
        align="center"
        prop="num_jihua"
        :filters="getUniqueValues('num_jihua')"
        :filter-method="filterHandler"
      />
      <el-table-column
        label="结余"
        align="center"
        prop="num_jihua_yu"
        :filters="getUniqueValues('num_jihua_yu')"
        :filter-method="filterHandler"
      />
      <el-table-column
        label="客户要求交期"
        align="center"
        prop="jiaoqi"
        :filters="getUniqueValues('jiaoqi')"
        :filter-method="filterHandler"
      />
      <el-table-column
        label="备注"
        align="center"
        prop="beizhu"
        :filters="getUniqueValues('beizhu')"
        :filter-method="filterHandler"
      />
      <el-table-column
        label="合同订单审批日期"
        align="center"
        prop="riqi_shenhe"
        :filters="getUniqueValues('riqi_shenhe')"
        :filter-method="filterHandler"
      />
      <el-table-column
        label="录入时间"
        align="center"
        prop="stime"
        :filters="getUniqueValues('stime')"
        :filter-method="filterHandler"
      />
      <el-table-column
        label="状态"
        align="center"
        prop="createTime"
        :filters="getUniqueValues('createTime')"
        :filter-method="filterHandler"
      >
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import * as XLSX from 'xlsx'
import { getTuZhiDai } from '@/api/productManage/index'

export default {
  name: 'SystemUser',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        page: 1,
        pageSize: 10,
        startDate:"",
        endDate:""
      },
      createTime: [],
      productList: [],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = false
      if (this.createTime.length) {
        this.queryParams.startDate =this.createTime[0]
        this.queryParams.endDate =this.createTime[1] 
      }
      getTuZhiDai(this.queryParams,).then((response) => {
        this.productList = response.data
        this.total = response.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 表单合计
     getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          // 只对订单数量和结余进行合计
          if (column.property === 'num_jihua' || column.property === 'num_jihua_yu') {
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + value;
                } else {
                  return prev;
                }
              }, 0);
              sums[index] += ' 元';
            } else {
              sums[index] = '';
            }
          } else {
            sums[index] = '';
          }
        });

        return sums;
      },
      // 筛选器表格
      getUniqueValues(prop) {
      const uniqueValues = [...new Set(this.productList.map(item => item[prop]))];
      return uniqueValues.map(value => ({ text: value, value }));
    },
    filterHandler(value, row, column) {
      const property = column.property;
      return row[property] === value;
    },
    handlePrint() {
      window.print()
    },

    /** 导出 Excel 功能 */
    handleExportExcel() {
      if (this.productList.length === 0) {
        this.$message.warning('没有数据可供导出')
        return
      }
      // 定义 prop 到中文表头的映射
      const headerMap = {
        id: '序号',
        name: '产品名称',
        tuhao: '图号',
        guige: '规格型号',
        kehu: '客户名称',
        hetong_leixing: '合同类型',
        dingdan: '合同订单编号',
        num_jihua: '订单数量',
        num_jihua_yu: '结余',
        jiaoqi: '客户要求交期',
        beizhu: '备注',
        riqi_shenhe: '合同订单审批日期',
        stime: '录入时间',
        createTime: '状态'
      }
  
      // 转换数据以使用中文表头
      const formattedData = this.productList.map(item => {
        const newItem = {}
        for (const key in item) {
          if (headerMap[key]) {
            newItem[headerMap[key]] = item[key]
          }
        }
        return newItem
      })
  
      const worksheet = XLSX.utils.json_to_sheet(formattedData)
      const workbook = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(workbook, worksheet, '产品订单列表')
      XLSX.writeFile(workbook, '产品订单列表.xls')
    }
  }
}
</script>
